<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Olympic Sport Dominance | Olympic Data Visualization</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .control-panel {
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            padding: 20px;
            background-color: #f8f9fa;
        }
        
        .viz-container {
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            min-height: 600px;
            background-color: white;
        }
        
        .year-slider {
            width: 100%;
            margin: 15px 0;
        }
        
        .control-btn {
            width: 100%;
            margin-top: 10px;
        }
        
        #yearDisplay {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin: 10px 0;
            padding: 5px;
            background-color: #1a3a6e;
            color: white;
            border-radius: 20px;
        }
        
        .country-item {
            padding: 8px 15px;
            margin: 5px 0;
            border-radius: 20px;
            display: inline-block;
            font-weight: 500;
        }
        
        .top-country {
            background-color: gold;
            color: #333;
        }
        
        .medal-type-btn {
            border-radius: 20px;
            margin: 5px;
            padding: 5px 15px;
        }
        
        .medal-type-btn.active {
            background-color: #1a3a6e;
            color: white;
        }
        
        .tooltip {
            position: absolute;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 5px;
            pointer-events: none;
            font-size: 14px;
        }
        
        #loader {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-bar-chart-line-fill me-2"></i>Olympic Data Visualization
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/medals-evolution">
                            <i class="bi bi-trophy me-1"></i>Medal Evolution
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/host-city-performance">
                            <i class="bi bi-geo-alt me-1"></i>Host City Performance
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/sport-dominance">
                            <i class="bi bi-graph-up me-1"></i>Sport Dominance
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/advanced-visualizations">
                            <i class="bi bi-stars me-1"></i>Advanced Visualizations
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4 mb-5">
        <div class="row mb-4">
            <div class="col-12">
                <h1><i class="bi bi-trophy-fill me-2"></i>Olympic Sport Dominance Analysis</h1>
                <p class="lead">Explore which countries have dominated specific Olympic sports throughout history</p>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 mb-4">
                <div class="control-panel">
                    <h5><i class="bi bi-sliders me-2"></i>Controls</h5>
                    <hr>
                    
                    <div class="mb-3">
                        <label for="sportSelect" class="form-label fw-bold">Select Sport:</label>
                        <select id="sportSelect" class="form-select">
                            <!-- Dynamically populated -->
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Medal Types:</label>
                        <div class="d-flex flex-wrap">
                            <button class="btn medal-type-btn active" data-medal="total">All</button>
                            <button class="btn medal-type-btn" data-medal="gold">
                                <i class="bi bi-circle-fill text-warning me-1"></i>Gold
                            </button>
                            <button class="btn medal-type-btn" data-medal="silver">
                                <i class="bi bi-circle-fill text-secondary me-1"></i>Silver
                            </button>
                            <button class="btn medal-type-btn" data-medal="bronze">
                                <i class="bi bi-circle-fill text-danger me-1"></i>Bronze
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Olympic Year:</label>
                        <div id="yearDisplay">1896</div>
                        <input type="range" class="form-range year-slider" id="yearSlider" min="1896" max="2020" step="4" value="1896">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">View Mode:</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="viewModeToggle" checked>
                            <label class="form-check-label" for="viewModeToggle">
                                <span class="badge bg-primary">Cumulative</span> / 
                                <span class="badge bg-secondary">Year Only</span>
                            </label>
                        </div>
                        <div class="small text-muted mt-1">Toggle to switch between cumulative medals and year-specific medals</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Top Countries to Display:</label>
                        <select id="countryLimit" class="form-select">
                            <option value="5">Top 5</option>
                            <option value="10" selected>Top 10</option>
                            <option value="15">Top 15</option>
                            <option value="20">Top 20</option>
                        </select>
                    </div>
                    
                    <button id="animateBtn" class="btn btn-success control-btn">
                        <i class="bi bi-play-fill me-1"></i>Play Animation
                    </button>
                    
                    <button id="resetBtn" class="btn btn-secondary control-btn mt-2">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                    </button>
                </div>
            </div>
            
            <div class="col-lg-9 mb-4">
                <div class="viz-container p-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Medals by Country</h5>
                        <div id="currentSport" class="badge bg-primary p-2">Select a sport</div>
                    </div>
                    
                    <div id="loader">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    
                    <div id="dominanceChart" style="height: 500px; width: 100%;"></div>
                    
                    <div id="legendContainer" class="mt-3">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 class="mb-2">Top Countries:</h6>
                                <div id="countryLegend" class="d-flex flex-wrap"></div>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="badge bg-light text-dark p-2">
                                    Summer Olympics: <span id="timeInfo"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <footer class="footer mt-5 py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">Olympic Data Visualization Project © 2023</span>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/sport_dominance.js') }}"></script>
</body>
</html> 